<template>
	<view class="home-wrap u-m-b-20">
		<base-nav-bar :isBack="true" :background="{'background':'#fff'}">
			<text
				slot="content"
				style="color: #333; width: 100%; text-align: center;padding-left: 20rpx;"
			>
				商家
			</text>
		</base-nav-bar>
		<!-- 商家简介 -->
		<view class="merchant-title u-flex u-flex-column u-flex-items-center u-p-20 u-m-l-20 u-m-r-20 u-m-t-40">
		</view>
		<view class="content-box u-p-20 u-m-t-30 u-m-l-40 u-m-r-40">
			<view class="u-flex u-flex-items-center u-flex-between u-m-b-20 merchant-logo">
				<image :src="merchantInfo.image" ></image>
			</view>
			<!-- grid商家功能模块 -->
			<view class="u-flex u-flex-items-center u-flex-start u-flex-wrap u-m-t-20">
				<view class="merchant-title">{{merchantInfo.name}}</view>
				<view class="merchant-introduction">{{merchantInfo.description}}</view>
				<view class="u-flex u-flex-column">
					<view class="merchant-item u-flex">
						<view class="u-flex u-flex-items-center u-flex-start">
							<image src="/static/images/merchant/merchantInfo/time.png" class="merchant-icon"></image>
							<text class="merchant-item-text">营业时间:</text>
						</view>
						<view class="merchant-item-number">{{merchantInfo.time}}</view>
					</view>
					<view class="merchant-item u-flex">
						<view class="u-flex u-flex-items-center u-flex-start">
							<image src="/static/images/merchant/merchantInfo/phone.png" class="merchant-icon"></image>
							<text class="merchant-item-text">商家电话:</text>
						</view>
						<view class="merchant-item-number">{{merchantInfo.phone}}</view>
					</view>
					<view class="merchant-item u-flex">
						<view class="u-flex u-flex-items-center u-flex-start">
							<image src="/static/images/merchant/merchantInfo/address.png" class="merchant-icon"></image>
							<text class="merchant-item-text">商家地址:</text>
						</view>
						<view class="merchant-item-number">{{merchantInfo.address}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>

import { mapGetters } from 'vuex';
import { HTTP_IMG_URL } from '../../config/app.js'
import BaseNavBar from "../../components/BaseNavBar.vue";

export default {
	components: {
		BaseNavBar
	},
	data() {
		return {
			merchantInfo: {
				logo: "/static/images/merchant/merchantInfo/merchant_logo.png",
				name: "南彩路淘玩生活馆",
				phone: "0703-0078653",
				address: "深圳市福田区文化东路与科技大道",
				description: "课程:羽毛球小班课培训(4-6人)、羽毛球一对二进阶课私教培训、羽毛球一对一培训…",
				time: "08:00～20:00"
			},
		};
	},
	computed: {
		...mapGetters(['isLogin','userInfo']),
		
	},
	onPullDownRefresh() {
	
	},
	
	onShow() {
		this.getMerchantInfo();
		
	},
	onHide() {
	},
	onLoad() {
		console.log("====this.userInfo",this.userInfo)
	},
	methods: {
		HTTP_IMG_URL() {
			return HTTP_IMG_URL
		},
		logout(){
			this.$refs.deletpopupAddress.$refs.deletpopup.open()
		},
		denglu() {
			this.$refs.deletpopupAddress.$refs.deletpopup.close()
		},
		// 路由跳转
		jump(path, parmas) {
			uni.navigateTo({
				url: path,
				query: parmas
			});
		},
		getMerchantInfo() {
			let that = this;
			that.$Api.merchant.merchantInfo().then(res => {
				console.log(res, 23);
				that.merchantInfo = res.data;
			}).catch(err => {
				console.log(err, 23);
			});
		}
	}
};
</script>

<style lang="scss" scoped>
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
.home-wrap {
	min-height: 100vh;
	background: #F6F6F8;
}
.kehu-item {
	border-radius: 20rpx;
	width: 100%;
	.swipers{
		width: 100%;
	}
}
.nickname{
	font-size: 34rpx;
	font-weight: bold;
}
.content-box{
	background:linear-gradient( 180deg, #E8FFED 0%,#FFFFFF 30%, #FFFFFF 100%);
	box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.1), inset 0px 1px 0px 0px #FFFFFF;
	border-radius: 30rpx;
	min-height: 30vh;
	position: relative;
	.merchant-logo{
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		overflow: hidden;
		position: absolute;
		top: -80rpx;
		left: 50%;
		margin-left: -70rpx;
		background: #E8FFED;
		display: flex;
		align-items: center;
		justify-content: center;
		image{
			width: 90%;
			height: 90%;
		}
	}
	.merchant-title{
		width: 100%;
		font-weight: 500;
		font-size: 32rpx;
		color: #000000;
		text-align: center;
		padding: 46rpx 0rpx 0rpx;
	}
	.merchant-introduction{
		width: 100%;
		color: #666;
		padding: 30rpx 0rpx 10rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #565656;
	}
	.merchant-item{
		width: 100%;
		margin: 20rpx 0rpx;
		align-items: center;
		.merchant-icon{
			width: 30rpx;
			height: 30rpx;
		}
		.merchant-item-text{
			font-weight: 400;
			font-size: 26rpx;
			color: #565656;
		}
		.merchant-item-number{
			font-weight: 400;
			font-size: 26rpx;
			color: #565656;
			margin-left: 10rpx;
		}
	}
}
</style>
